<template>
    <el-container>
        <el-header>
            <el-input placeholder="请输入栏目名称" v-model="categoryName"></el-input>
            <el-button type="primary" @click="addCategory">新增栏目</el-button>
        </el-header>
        <el-main>
            <el-table :data="categories" v-loading="loading" @selection-change="(selection)=>this.selections=selection">
                <el-table-column type="selection"></el-table-column>
                <el-table-column label="编号" prop="id"></el-table-column>
                <el-table-column label="栏目名称" prop="name"></el-table-column>
                <el-table-column label="启用时间" prop="createDate" min-width="100">
                    <template slot-scope="scope">{{scope.row.createDate | formatDate}}</template>
                </el-table-column>
                <el-table-column label="操作" min-width="150">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="updateCategory(scope.row)">编辑</el-button>
                        <el-button type="danger" size="mini" @click="showDeleteCategoryPop(scope.row)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-button type="danger" class="bulk-delete" :disabled="this.selections.length===0"
                       @click="showDeleteCategoriesPop">
                批量删除
            </el-button>
        </el-main>
    </el-container>
</template>

<script>
    import {deleteReq, get, post} from "../utils/api";

    export default {
        data() {
            return {
                categoryName: '',
                categories: [],
                loading: false,
                selections: []
            }
        },
        mounted() {
            this.getAllCategories();
        },
        methods: {
            getAllCategories() {
                this.loading = true;
                get("/admin/category/all").then(res => {
                    this.loading = false;
                    if (res.status === 0) {
                        this.categories = res.data;
                    } else {
                        this.$message.error(res.msg);
                    }
                });
            },

            addCategory() {
                if (this.categoryName.length === 0) {
                    this.$message.warning('栏目名不能为空');
                    return;
                }
                this.loading = true;
                post('/admin/category/add', {name: this.categoryName}).then(res => {
                    this.loading = false;
                    if (res.status === 0) {
                        this.categoryName = '';
                        this.getAllCategories();
                    } else {
                        this.$message.error(res.msg);
                    }
                });
            },

            deleteCategory(categoryIds) {
                this.loading = true;
                deleteReq("/admin/category/deleteIds", {ids: categoryIds}).then(res => {
                    this.loading = false;
                    if (res.status === 0) {
                        this.getAllCategories();
                    } else {
                        this.$message.error(res.msg);
                    }
                });
            },

            showDeleteCategoryPop(category) {
                this.$confirm('确认删除栏目\t' + category.name + '\t?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteCategory(category.id);
                });
            },

            showDeleteCategoriesPop() {
                this.$confirm('批量删除栏目, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let ids = [];
                    this.selections.forEach((item) => {
                        ids.push(item.id)
                    });
                    this.deleteCategory(ids.join(","));
                });
            },

            updateCategory(category) {
                this.$prompt('请输入修改后的栏目名', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                }).then(({value}) => {
                    if (value.length === 0) {
                        this.$message.warning('栏目名不能为空');
                    } else {
                        this.loading = true;
                        post('admin/category/update', {id: category.id, name: value}).then(res => {
                            this.loading = false;
                            if (res.status === 0) {
                                this.$message.success('修改成功');
                                this.getAllCategories()
                            } else {
                                this.$message.error(res.msg);
                            }
                        }).catch(e => {
                            this.loading = false;
                            this.$message.error('修改失败');
                            console.log(e.message);
                        })
                    }
                });
            }
        }
    }
</script>

<style scoped lang="stylus">
    .el-container {

        .el-header {
            margin-top 20px
            display flex
            align-items center
            background-color #ececec
            justify-content flex-start

            .el-input {
                width 300px
            }

            .el-button {
                height 40px
                margin-left 10px
            }
        }

        .el-main {
            background-color #ececec
            margin-top 20px
            display flex
            flex-direction column

            .el-table {
            }

            .bulk-delete {
                margin-top 10px
                width 100px
            }
        }
    }
</style>
